<template>
  <div class="app-header">
    <el-button link @click="quit">退出</el-button>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import { useStore } from "../../stores/index";

const store = useStore();
const router = useRouter();

const quit = () => {
  ElMessageBox.confirm("确认退出系统吗？", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      store.quitSystemAction().then(() => {
        router.push("/login");
      });
    })
    .catch(() => {
      console.log("取消退出");
    });
};
</script>

<style>
.app-header {
  height: 60px;
  line-height: 60px;
  text-align: right;
}
</style>
